<template>
  <el-popover
      placement="bottom"
      width="180"
      v-model="visible"
      trigger="click">
    <div class="task-popover-header">
      <span class="task-popover-header-title">变更状态</span>
    </div>
    <div class="task-popover-item-choose">
      <div class="task-popover-line-choose">
        <i class="iconfont task-popover-icon-choose" :class="itemData.icon" :style="{color:itemData.color}"></i>
        <div class="task-popover-line-left-choose"></div>
      </div>
      <span class="task-popover-item-choose-type">{{ itemData.label }}</span>
      <span class="task-popover-item-choose-title">可变更为:</span>
    </div>
    <div class="task-popover-item" @click="chooseItem(item)" v-for="(item,index) in itemForm" v-if="item.label != itemData.label">
      <div class="task-popover-line">
        <div :class="[index == itemForm.length-1 ?'task-popover-line-left-half':'task-popover-line-left']"></div>
        <i class="iconfont icon-ziyuan task-popover-line-icon"></i>
      </div>
      <i class="iconfont task-popover-icon" :class="item.icon" :style="{color:item.color}"></i>
      <span class="task-popover-item-item">{{ item.label }}</span>
    </div>
    <i slot="reference" class="iconfont task-popover-botton-icon" :class="itemData.icon" :style="{color:itemData.color}"></i>
  </el-popover>
</template>

<script>
export default {
  name: "chooseStatus",
  data(){
    return{
	  form: [{
	  		value: '00',
	  		label: '待确认',
	  		type: false,
	  		color: 'rgb(250, 145, 31)',
	  		icon: 'icon-shuangyuanquan-copy'
	  	},
	  	{
	  		value: '01',
	  		label: '进行中',
	  		type: false,
	  		color: 'rgb(69, 240, 210)',
	  		icon: 'icon-shuangyuan'
	  	},
	  	{
	  		value: '02',
	  		label: '已完成',
	  		type: false,
	  		color: 'rgb(70, 216, 171)',
	  		icon: 'icon-yiwancheng-copy'
	  	},
	  	// {
	  	// 	value: '03',
	  	// 	label: '已终止',
	  	// 	type: false,
	  	// 	color: 'rgb(248, 120, 103)',
	  	// 	icon: 'icon-yemian-1'
	  	// },

      

	  ],
      itemForm:[],
      itemData:null,
      visible:false
    }
  },
  props:{
      status:{
          type:String,
          default(){
             return '待确认'
          }
      }
  },
  watch:{
    status: {
      handler(val, oldval) {
        console.log('我改变了');
        console.log(val);
        this.filterItem(val)
      },
      // 深度观察监听
      deep: true,
      immediate:true
    }
  },
  created () {
  },
  methods:{
    chooseItem(item){
      this.filterItem(item.label)
     this.$emit('updateclick',item.value)
    },
    filterItem(data){
      var _this = this
      _this.itemForm = JSON.parse(JSON.stringify(_this.form))
      _this.itemForm.forEach(function (item,index){
        if (item.label == data){
          _this.itemData = item
          _this.visible = false
          _this.itemForm.splice(index,1)
        }
      })
    }
  },
}
</script>

<style scoped>
.task-popover-header{
  padding: 10px 16px;
  border-bottom: 1px solid #dadee3;
  background-color: #f5f6f8;

}

.task-popover-header-title{
  font-size: 12px;
  color: #2e405e;
  font-weight: 700;
}

.task-popover-item{
  position: relative;
  height: 40px;
  padding: 10px 16px 10px 40px;
  cursor: pointer;
  -webkit-touch-callout: none;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.task-popover-item:hover{
  background-color: #f5f6f8;
}

.task-popover-item-item{
  color: #2e405e;
  font-size: 12px;
  line-height: 18px;
}

.task-popover-line{
  position: absolute;
  height: 40px;
  top: 0;
  left: 22px;
}

.task-popover-line-left{
  height: 40px;
  width: 1px;
  background-color: rgba(218,222,227,0.9);
  position: absolute;
  left: 0;
  top: 0;
}

.task-popover-line-left-half{
  height: 10px;
  width: 1px;
  background-color: rgba(218,222,227,0.9);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 12px;
}

.task-popover-line-icon{
  font-size: 18px;
  color: #dadee3;
  line-height: 30px;
  position: absolute;
  left: -4px;
}

.task-popover-icon{
  font-size: 16px;
  margin-right: 5px;
}

.task-popover-item-choose{
  position: relative;
  height: 40px;
  padding: 10px 16px 10px 40px;
  cursor: pointer;
  -webkit-touch-callout: none;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.task-popover-item-choose-type{
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

.task-popover-item-choose-title{
  font-size: 12px;
  color: #909aaa;
  margin-left: 10px;
}

.task-popover-line-choose{
  height: 40px;
  position: absolute;
  left: 22px;
  top: 0;
  display: flex;
  align-items: center;
}

.task-popover-icon-choose{
  font-size: 16px;
  position: absolute;
  left: -8px;
}

.task-popover-line-left-choose{
  height: 12px;
  width: 1px;
  position: absolute;
  left: 0px;
  bottom: 0;
  background-color: rgba(218,222,227,0.9);
}

.task-popover-botton-icon{
  font-size: 16px;
}

.rejected{
  color: rgb(236, 0, 25);
}

.completed{
  color: rgb(254, 188, 8);
}

.inProgress{
  color: rgb(74, 144, 226);
}

.toDo{
  color: rgb(254, 115, 0);
}

/deep/ .el-button--mini.is-circle {
  padding: 0px !important;
  border-color: white !important;
}

</style>

<style>
.el-popper {
  padding: 0px !important;
}
</style>
